<template>
  <!-- 轮播图/分类区域 -->
  <div class="container">
    <home-swiper :switch-time="4000"/>
  </div>

  <!-- 专栏推荐区域 -->
  <div class="hot-recommend">
    <div class="container">
      <!-- 新鲜好物 -->
      <home-recommend sub-title="新鲜出炉 品质靠谱"
                      title="新鲜好物">
        <template #top-right>
          <more href=""></more>
        </template>
        <template v-if="newGood.length">
          <home-recommend-good v-for="good in newGood"
                               :key="good.id"
                               :data="good"/>
        </template>
        <!-- 骨架屏显示 -->
        <template v-else>
          <home-recommend-item-skeleton v-for="item in 4"/>
        </template>
      </home-recommend>

      <!-- 人气推荐 -->
      <home-recommend sub-title="人气爆款 不容错过"
                      title="人气推荐">
        <template #top-right>
          <more href=""></more>
        </template>
        <template v-if="hotCate.length">
          <home-recommend-hot v-for="hot in hotCate"
                              :key="hot.id"
                              :data="hot"/>
        </template>
        <!-- 骨架屏显示 -->
        <template v-else>
          <home-recommend-item-skeleton v-for="item in 4"/>
        </template>
      </home-recommend>
    </div>
  </div>

  <!-- 热门品牌 -->
  <div class="container">
    <home-recommend sub-title="国际经典 品质保证"
                    title="热门品牌">
      <template #top-right>
        <div class="switch">
          <home-recommend-hot-switch :disabled="page <= 0"
                                     icon="icon-angle-left"
                                     @click="changePage(-1)"/>
          <home-recommend-hot-switch :disabled="page >= Math.ceil(brandList.length / rows) - 1"
                                     icon="icon-angle-right"
                                     @click="changePage(1)"/>
        </div>
      </template>
      <home-brand-swiper :page="page"
                         :page-width="1240">
        <home-recommend-brand v-for="brand in brandList"
                              :key="brand.id"
                              :data="brand"/>
      </home-brand-swiper>
    </home-recommend>
  </div>

  <!-- 热门分类推荐 -->
  <div class="hot-recommend">
    <div class="container">
      <home-recommend v-for="cate in recCate" :title="cate.name"
                      :key="cate.id">
        <template #top-right>
          <div class="sub-category" v-if="cate.children">
            <router-link v-for="cate1 in cate.children.slice(0, 5)" to="">
              {{cate1.name}}
            </router-link>
          </div>
          <more :href="`/category/${cate.id}`"></more>
        </template>
        <div class="body">
          <div class="left">
            <img v-lazy="cate.picture"/>
            <router-link :to="`/category/${cate.id}`">
                <div>{{cate.name}}馆</div>
                <div>{{cate.saleInfo}}</div>
            </router-link>
          </div>
          <div class="right">
            <home-recommend-category v-for="good in cate.goods"
                                     :data="good"
                                     :cate-id="cate.id"
                                     :key="good.id"/>
          </div>
        </div>
      </home-recommend>
    </div>
  </div>

  <!-- 最新专题 -->
  <div class="container">
    <home-recommend title="最新专题">
      <template #top-right>
        <more href=""></more>
      </template>
      <home-recommend-special v-for="special in recSpecial"
                              :key="special.id"
                              :data="special"/>
    </home-recommend>
  </div>
</template>

<script lang="ts"
        setup>
import {getHotCate, getNewGood, getRecCategory, getSpecial} from '@/api/home'
import HomeBrandSwiper from '@/components/library/HomeBrandSwiper.vue'
import HomeRecommend from '@/components/library/HomeRecommend.vue'
import HomeRecommendBrand from '@/components/library/HomeRecommendBrand.vue'
import HomeRecommendCategory from '@/components/library/HomeRecommendCategory.vue'
import HomeRecommendGood from '@/components/library/HomeRecommendGood.vue'
import HomeRecommendHot from '@/components/library/HomeRecommendHot.vue'
import HomeRecommendHotSwitch from '@/components/library/HomeRecommendHotSwitch.vue'
import HomeRecommendItemSkeleton from '@/components/library/HomeRecommendItemSkeleton.vue'
import HomeRecommendSpecial from '@/components/library/HomeRecommendSpecial.vue'
import More from '@/components/library/More.vue'
import HomeSwiper from '@/components/library/Swiper.vue'
import {useCategoryStore} from '@/stores/category'
import {useCommonStore} from '@/stores/common'
import {useSwiperStore} from '@/stores/swiper'
import type {Category, Hot} from '@/types/category'
import type {Good} from '@/types/good'
import type {Special} from '@/types/special'
import type {Swiper} from '@/types/swiper'
import {storeToRefs} from 'pinia'
import {ref} from 'vue'

// 设置页面路径
let commonStore = useCommonStore()
commonStore.pathList.length = 1

// 轮播图数据
let swiperStore = useSwiperStore()
let {list: swiper} = storeToRefs(swiperStore)
// 新鲜好物数据
let newGood = ref<Good[]>([])
// 人气推荐数据
let hotCate = ref<Hot[]>([])
// 热门品牌数据
let cateStore = useCategoryStore()
let {brand: brandList} = storeToRefs(cateStore)
// 推荐分类数据
let recCate = ref<Category[]>([])
// 推荐专题数据
let recSpecial = ref<Special[]>([])

requestAll()

// 发起所有接口请求
function requestAll():void {
  Promise.all([
    getNewGood(),
    getHotCate(),
    getRecCategory(),
    getSpecial()
  ]).then(([newGoodRes, hotCateRes, cateRes, specialRes]) => {
    initNewGood(newGoodRes)
    initHotCate(hotCateRes)
    initRecCate(cateRes)
    initRecSpecial(specialRes)
  })
}

// 初始化新鲜好物数据
function initNewGood(res: any):void {
  newGood.value = <Good[]>res.result
}

// 初始化人气推荐数据
function initHotCate(res: any):void {
  hotCate.value = <Hot[]>res.result
}

// 初始化推荐分类及商品数据
function initRecCate(res: any):void {
  recCate.value = <Category[]>res.result
}

// 从初始化推荐专题
function initRecSpecial(res: any):void {
  recSpecial.value = <Special[]>res.result
}


// 热门品牌轮播图当前页码
let page = ref<number>(0)
// 每页个数
let rows = 5

// 分页改变事件
function changePage(num: number):void {
  page.value += num
}
</script>

<style lang="less"
       scoped>
.hot-recommend {
  background-color: #fff;

  .sub-category {
    display: flex;
    font-size: 16px;
    align-items: center;
    margin-right: 100px;

    a ~ a {
      margin-right: 15px;
    }
  }

  .body {
    width: 100%;
    display: flex;
    justify-content: flex-start;

    .left {
      position: relative;
      img {
        width: 240px;
        height: 610px;
        object-fit: cover;
      }
      >a {
        position: absolute;
        display: flex;
        cursor: pointer;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 188px;

        div {
          font-size: 18px;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 66px;
        }

        div:nth-of-type(1) {
          background-color: rgba(0,0,0,.9);
          width: 76px;
        }

        div:nth-of-type(2) {
          flex: 1;
          background-color: rgba(0,0,0,.7);
        }
      }
    }

    .right {
      flex: 1;
      padding-left: 10px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      *:not(:nth-of-type(4n)) {
        margin-right: 10px;
      }
    }
  }
}
</style>